<template>
  <div>
    <orderDetail :BillNO="props.BillNO" />

    <el-table
      :data="tableData"
      class="ps_table_header"
      border
      @cell-click="cellClick"
      :cell-style="cellStyle"
    >
      <el-table-column
        align="center"
        prop="RouteOrder"
        width="80"
        label="加工顺序"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        align="center"
        prop="OrderName"
        label="工序名称"
        width="120"
        show-overflow-tooltip
      >
        <template #default="scope">
          {{ `${scope.row.OrderID}${scope.row.OrderName}` }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="LineName"
        label="生产部门"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        align="center"
        prop="ProduceStyle"
        label="生产方式"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        width="100"
        align="center"
        prop="MoveInQty"
        label="累计移入"
        show-overflow-tooltip
      >
        <template #header>
          <el-tooltip content="移入数量:(工艺信息移入数量)" placement="top">
            <span>移入数量</span>
          </el-tooltip>
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        prop="GoodQty"
        label="良品数量"
        show-overflow-tooltip
      >
        <template #header>
          <el-tooltip content="良品数量:(工艺信息良品数量)" placement="top">
            <span>良品数量</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="BadQty"
        label="不良数量"
        show-overflow-tooltip
      >
        <template #header>
          <el-tooltip content="不良品数量:(工艺信息不良品数量)" placement="top">
            <span>不良数量</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="MoveOutQty"
        label="移出数量"
        show-overflow-tooltip
      >
        <template #header>
          <el-tooltip content="移出数量:(工艺信息移出数量)" placement="top">
            <span>移出数量</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="dscsl"
        label="待生产数量"
        show-overflow-tooltip
      >
        <template #header>
          <el-tooltip
            content="待生产数量:(当加工顺序为第一行时则使用齐套领料数量-良品数量-不良品数量否则使用上一道工序良品数量-良品数量-不良品数量)"
            placement="top"
          >
            <span>待生产数量</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="fgr"
        label="返工入"
        show-overflow-tooltip
      >
        <template #header>
          <el-tooltip
            content="返工入:工序移转退回单移入转移数量之和"
            placement="top"
          >
            <span>返工入</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="fgt"
        label="返工退"
        show-overflow-tooltip
      >
        <template #header>
          <el-tooltip
            content="返工退：工序移转退回单移出转移数量之和"
            placement="top"
          >
            <span>返工退</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="batchQuantity"
        label="批量"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        align="center"
        width="140"
        prop="batchstdmin"
        label="批量标准工时(分钟)"
        show-overflow-tooltip
      ></el-table-column>

      <el-table-column
        align="center"
        width="140"
        prop="remark"
        label="备注"
        show-overflow-tooltip
      ></el-table-column>
    </el-table>
    <el-pagination
      class="pagination"
      v-model:current-page="page.pageCurrent"
      background
      layout="prev, pager, next,total"
      :total="page.total"
      v-model:page-size="page.pageSize"
    />
  </div>
</template>

<script setup>
import { ref, watch, watchEffect } from 'vue'
import orderDetail from './orderDetail.vue'

const tableData = ref([])
const allData = ref([])

const props = defineProps({
  data: Array,
  total: Number,
  BillNO: String
})

const page = ref({
  pageSize: 10,
  pageCurrent: 1,
  total: 0
})

const emits = defineEmits(['cellClick', 'update:orderID'])

const cellClick = (row, column) => {
  if (column.label === '工序名称') {
    emits('update:orderID', row.OrderID)
  }
}

const cellStyle = ({ column }) => {
  if (column.label === '良品数量' || column.label === '不良数量') {
    return { backgroundColor: '#e2e2e2' }
  }

  if (column.label === '工序名称') {
    return { color: 'blue' }
  }
}

const updataTableData = () => {
  tableData.value = allData.value.slice(
    (page.value.pageCurrent - 1) * page.value.pageSize,
    page.value.pageSize * page.value.pageCurrent
  )
}

watch(
  () => page.value.pageCurrent,
  () => {
    updataTableData()
  }
)

watchEffect(() => {
  allData.value = props.data
  page.value.total = props.total
  updataTableData()
})
</script>

<style scoped lang="scss">
.pagination {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 10px;
  text-align: center;
}
</style>
